<template>
  <div>
    <el-form
      style="width: 60%; margin: 0 auto"
      :model="form"
      ref="form"
      label-width="120px"
    >
      <el-form-item :label="$t('sys.is_enable')" prop="status">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item
        :label="$t('sys.host_name')"
        prop="host"
        :rules="[
          { required: isUsed, message: $t('sys.host_name_not_null') },
          {
            pattern: HOST_REG,
            message: $t('sys.enter_valid_IP_or_domain_name'),
          },
        ]"
      >
        <el-input
          v-model="form.host"
          :maxlength="255"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item
        :label="$t('sys.port')"
        prop="port"
        :rules="[
          { required: isUsed, message: $t('sys.port_not_null') },
          { pattern: PORT_REG, message: $t('sys.enter_valid_port_0_65535') },
        ]"
      >
        <el-input
          v-model="form.port"
          :maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('sys.username')"
        prop="username"
        :rules="[{ required: isUsed, message: $t('sys.username_not_null') }]"
      >
        <el-input
          v-model="form.username"
          :maxlength="256"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item
        :label="$t('sys.password')"
        prop="password"
        :rules="[{ required: isUsed, message: $t('sys.password_not_null') }]"
      >
        <el-input
          v-model="form.password"
          :maxlength="128"
          show-word-limit
          show-password
        ></el-input>
      </el-form-item>

      <el-form-item label="">
        <el-button @click="handleReset">{{ $t("sys.cancel") }}</el-button>
        <el-button
          :loading="confirmLoading"
          style="margin-left: 20px"
          @click="handleSubmit"
          type="primary"
        >
          {{ $t("sys.submit") }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getMsgWebconfig,
  postMsgWebconfig,
} from "@/apis/paas/MsgWebConfigController.js";
import { HOST_REG, PORT_REG } from "@/utils/reg";
import EventBus from "@/utils/eventBus";
export default {
  name: "SysInfo",
  data() {
    return {
      HOST_REG,
      PORT_REG,
      data: {},
      form: {},
      confirmLoading: false,
    };
  },
  created() {
    this.init();
  },
  computed: {
    isUsed() {
      return !!this.form.status;
    },
  },
  methods: {
    init() {
      getMsgWebconfig().then((res) => {
        this.data = res || {};
        this.$nextTick(() => {
          const { status, host, port, username, password } = this.data;
          this.form = {
            status: !!status,
            host,
            port: port ? port.toString() : "",
            username,
            password,
          };
          this.$refs.form.clearValidate();
        });
      });
    },

    async handleSubmit() {
      try {
        await this.$refs.form.validate();
        const { id } = this.data;
        const { status, host, port, username, password } = this.form;
        this.confirmLoading = true;
        postMsgWebconfig({
          id,
          host,
          port,
          username,
          password,
          status: status ? 1 : 0,
        })
          .then((res) => {
            this.$message.success(this.$t("sys.operation_success"));
            // 应用端刷新一下消息的配置，更新一下头像上的消息
            if (process.env.VUE_APP_USER === "APP") {
              EventBus.$emit("sendSysMsgConfigChange");
            }
          })
          .finally(() => {
            this.confirmLoading = false;
          });
      } catch (error) {
        console.log(error);
      }
    },
    handleReset() {
      this.init();
    },
  },
};
</script>

<style></style>
